<template>
  <view class="home">
    <navBar :languageSwitch="languageSwitch" @submitLanguage="submitLanguage"></navBar>
    <view class="home-detail">
      <view class="home-title">{{CurrentPeriod}}</view>
    </view>
    <view class="home-detail-img">
      <img class="home-img-msg"  :src="query.image" alt="">
    </view>
    <div class="home-detail-money">
      <div>
        {{ query.last_amount }}&nbsp;USDT
      </div>
      <div>
        <div>
          {{query.last_share}}
        </div>
      </div>
    </div>

    <view class="home-detail-money-bottom" >
      <view>
        {{residue}}{{moneyTotal}}
      </view>
      <view class="navHome-col-img" @tap="toggleHandle">
        <img class="nav-col-img" src="../../../static/jiaoyi/shouye/3.png" alt="">
      </view>

      <view class="home-detail-money-bottom-select" v-show="determine" >
        <div v-for="(item,index) in query.option" :key="index">
          <div class="moneyMsg" @tap="handleTouchMsg(item,index)" :class="{ active: isActive === index }">
            <div>{{item.key}}</div>
            <div>{{item.value}}</div>
          </div>
        </div>
      </view>
    </view>

    <view class="nav-detail-msg">
      <view class="nav-detail-msg-money">
        {{moneyTotal}}&nbsp;USDT
      </view>
      <view class="nav-detail-msg-title" @tap="toggleBuy">
        {{subscription}}
      </view>
    </view>

    <uni-popup ref="InvitationCodeMsg" type="dialog" @touchmove.stop.prevent="moveHandle" :is-mask-click="false">
      <uni-popup-dialog ref="inputClose"
                        mode="input"
                        title="请输入邀请码"
                        placeholder="请输入邀请码"
                        v-model="referral_code"
                        @confirm="dialogInvitationCodeMsgConfirm"
                        @close="dialogInvitationCodeMsgClose"
                        />
    </uni-popup>
  </view>
</template>

<script setup>
import navBar from '../../../component/navBar.vue';
import {onLoad, onShow} from "@dcloudio/uni-app";
import {ref,reactive,computed} from "vue";
import {buySubscribe} from "@/api/home";
let languageSwitch = ref(true);
let query = reactive({})
let param = reactive({})
let total = ref(0);
let determine = ref(false);
let moneyKey = ref('')
let referral_code = ref('');
let isActive = ref();
let InvitationCodeMsg = ref(null);

let CurrentPeriod = ref('當期');
let residue = ref('剩余');
let subscription = ref('認購');

const moveHandle = (e) => {
  return false
}

const dialogInvitationCodeMsgConfirm = (e)=>{
  let params = Object.assign({}, param, {
    buy_num: moneyKey.value || query.level,
    referral_code: referral_code.value
  })
  buySubscribe(params).then(res=>{
    if(res.data.code === 200){
      uni.showToast({
        title: 'ok',
        icon: 'success'
      })
      uni.switchTab({
        url: '/pages/index/home'
      })

    }else{
      uni.showToast({
        title: res.data.msg,
        icon: 'error',
      })
    }
  })
  toggleHandleInvitationCodeMsg();
}

const dialogInvitationCodeMsgClose = ()=>{
  toggleHandleInvitationCodeMsg();
}

const toggleHandleInvitationCodeMsg =()=>{
  InvitationCodeMsg.value.close();
  referral_code.value = ''
}

const moneyTotal = computed(() => {
  return  total.value
})

onLoad((options)=>{
  query = JSON.parse(options.data)
  total.value = query.last_share === 0 ? '' : query.last_share
  // referral_code.value = query.referral_code
})

const submitLanguage = (row)=>{
  console.log(row)
}

const handleTouchMsg = (item,index)=>{
  total.value = item.key * item.value;
  moneyKey.value = item.key
  //延迟一秒在关闭
  setTimeout(()=>{
    determine.value = false;
  },200)
  isActive.value = index;
}

const toggleHandle =()=>{
  determine.value = !determine.value
}

const toggleBuy = ()=>{
  InvitationCodeMsg.value.open();
}


onShow(()=>{
  const lang = uni.getStorageSync('LANG_KEY')
  if(lang === '中文'){
    CurrentPeriod.value = '當期';
    residue.value = '剩余';
    subscription.value = '認購';
  }
  if(lang === 'Eng'){
    CurrentPeriod.value = 'Period';
    residue.value = 'Residue';
    subscription.value = 'Subscription';
  }
  if (lang === '日本語'){
    CurrentPeriod.value = '当期';
    residue.value = '余剰';
    subscription.value = '購読する';
  }
  if (lang === '한국어'){
    CurrentPeriod.value = '기간'
    residue.value = '남은';
    subscription.value = '구매';
  }
})


</script>

<style scoped>
.active {
  background-color: rgb(31, 78, 157); /* 背景颜色变化 */
  border-radius: 5px;
  color: rgb(255,255,255);
}
.moneyMsg{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 5px;
  box-sizing: border-box;
}
.home-img-msg{
  width:100%;
  scale: 0.9;
  margin: 0 auto;
  height: 50%;
}
.home{
  background-color: #FFFFFF;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  min-height: 100vh;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  position: relative;
  z-index: 1;
}
.home-detail{
  margin-top: 1.5rem;
  text-align: center;
}
.home-title{
  font-size: 20px;
  margin-bottom: 0.8rem;
}
.home-detail-money{
  display: flex;
  justify-content: space-between;
  padding: 0px 5px;
  margin: 1rem 1.5rem;
  box-sizing: border-box;
  font-size: 16px;
}
.home-detail-money-bottom{
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  padding: 1rem 0px;
  box-sizing: border-box;
  margin: 1rem 1.5rem;
  background-color: #DEEBFE;
  border-radius: 5px;
  position: relative;
}
.home-detail-money-bottom-select{
  position: absolute;
  top: 102%;
  width: 100%;
  background: #DEEBFE;
  height: auto;
  line-height: 30px;
  border-radius: 5px;
}
.navHome-col-img{
  display: flex;       /* 启用 Flexbox 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  scale: 0.7;
}
.nav-detail-msg{
  position: fixed;
  bottom: 5px;
  left: 0;
  right: 0;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  box-sizing: border-box;
}
.nav-detail-msg-money{
  font-weight: bolder;
}
.nav-detail-msg-title{
  color: #FFFFFF;
  background-color: #2A54A0;
  width: 160px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 10px;
  font-size: 14px;
}
</style>